<!-- eslint-disable vue/no-multiple-template-root -->
<template>
  <div>
    <div id="main" style="width: 900px; height: 600px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";

export default {
  data() {
    return {
      dataList: [
        [
          { x: 0.01, y: 1, z: 0, color: "#d19a66" },
          { x: 0.05, y: 1, z: 0.2, color: "#d19a66" },
          { x: 0.1, y: 1, z: 0.3, color: "#d19a66" },
          { x: 1, y: 1, z: 0.4, color: "#d19a66" },
          { x: 1, y: 1, z: 1, color: "#d19a66" },
          { x: 2, y: 1, z: 0, color: "#d19a66" },
          { x: 3, y: 1, z: 2, color: "#d19a66" },
          { x: 4, y: 1, z: 3, color: "#d19a66" },
          { x: 5, y: 1, z: 1, color: "#d19a66" },
          { x: 6, y: 1, z: 2, color: "#d19a66" },
          { x: 7, y: 1, z: 3, color: "#d19a66" },
          { x: 8, y: 1, z: 0, color: "#d19a66" },
          { x: 9, y: 1, z: 0, color: "#d19a66" },
          { x: 12, y: 1, z: 0, color: "#d19a66" },
          { x: 19, y: 1, z: 0, color: "#d19a66" },
        ],
        [
          { x: 0, y: 2, z: 0, color: "#d19a66" },
          { x: 1, y: 2, z: 0, color: "#d19a66" },
          { x: 1, y: 2, z: 1, color: "#d19a66" },
          { x: 2, y: 2, z: 0, color: "#d19a66" },
          { x: 3, y: 2, z: 2, color: "#d19a66" },
          { x: 4, y: 2, z: 3, color: "#d19a66" },
          { x: 5, y: 2, z: 1, color: "#d19a66" },
          { x: 6, y: 2, z: 2, color: "#d19a66" },
          { x: 7, y: 2, z: 3, color: "#d19a66" },
          { x: 8, y: 2, z: 0, color: "#d19a66" },
          { x: 9, y: 2, z: 0, color: "#d19a66" },
          { x: 12, y: 2, z: 0, color: "#d19a66" },
          { x: 19, y: 2, z: 0, color: "#d19a66" },
        ],
        [
          { x: 1, y: 3, z: 1, color: "#e06c75" },
          { x: 2, y: 3, z: 2, color: "#e06c75" },
          { x: 3, y: 3, z: 0, color: "#e06c75" },
          { x: 4, y: 3, z: 1, color: "#e06c75" },
          { x: 5, y: 3, z: 1, color: "#e06c75" },
          { x: 6, y: 3, z: 1, color: "#e06c75" },
          { x: 7, y: 3, z: 1, color: "#e06c75" },
          { x: 8, y: 3, z: 1, color: "#e06c75" },
          { x: 9, y: 3, z: 1, color: "#e06c75" },
        ],
      ],
      selectSpectrogram: null,
    };
  },
  mounted() {
    this.drewLine();
  },
  methods: {
    drewLine() {
      var chart = echarts.init(document.getElementById("main"));
      let option = {
        xAxis3D: {
          type: "value",
          name: "",
          axisLabel: {
            show: true,
            interval: 0, //使x轴都显示
          },
        },
        yAxis3D: {
          type: "category",
          name: "",
          data: [11, 22, 33, 44, 55, 66, 77, 88, 99],
          axisLabel: {
            show: true,
            interval: 0, //使y轴都显示
          },
        },
        zAxis3D: {
          type: "value",
          name: "",
        },

        tooltip: {
          show: true,
          formatter: function (params) {
            let content = `
            X: ${params.value[0]}<br>
            Y: ${params.value[1]}<br>
            Z: ${params.value[2]}
        `;
            return content;
          },
        },
        grid3D: {
          boxWidth: 300,
          boxHeight: 140,
          boxDepth: 200,

          axisLine: {
            show: true,
            interval: 0,
            lineStyle: {
              color: "#2c3e50",
            },
          },
          // 控制灵敏度，数值越大越灵敏
          viewControl: {
            distance: 400,
            rotateSensitivity: 10, // 控制旋转的灵敏度
            zoomSensitivity: 10, // 控制缩放的灵敏度
            panSensitivity: 10, // 控制平移的灵敏度
          },
        },
      };

      const convertedDataList = this.dataList.map((series) =>
        series.map((point) => [point.x, point.y, point.z])
      );

      let series = [];
      // 设置颜色数组
      //#region
      const uniqueColorsSet = new Set();
      this.dataList.forEach((series) => {
        // 假设每个系列中的所有点都有相同的颜色，只取系列中第一个点的颜色
        if (series.length > 0) {
          uniqueColorsSet.add(series[0].color);
        }
      });
      const uniqueColorsArray = Array.from(uniqueColorsSet);
      //#endregion

      //#region 设置name数组
      const uniqueName = new Set();
      this.dataList.forEach((series) => {
        // 假设每个系列中的所有点都有相同的颜色，只取系列中第一个的Y轴
        if (series.length > 0) {
          uniqueName.add(series[0].y);
        }
      });
      const uniquNameArray = Array.from(uniqueName);
      //#endregion
      convertedDataList.forEach((item, index) => {
        let series1 = {
          type: "scatter3D",
          name: uniquNameArray[index],
          symbolSize: 3,
          itemStyle: {
            color: uniqueColorsArray[index],
          },
          label: {
            //当type为scatter3D时有label出现
            show: true,
            position: "top", //标签的位置，也就是data中数据相对于线在哪个位置
            distance: 0,
            textStyle: {
              color: "#2c3e50",
              fontSize: 12,
              borderWidth: 0,
              borderColor: "#2c3e50",
              backgroundColor: "transparent",
            },
          },
          data: item,
        };
        let series2 = {
          type: "line3D", //当type为line3D时有label没有作用，官网没有label这个配置项
          name: uniquNameArray[index],
          smooth: true,
          lineStyle: {
            width: 5, //线的宽度
            color: uniqueColorsArray[index], //线的颜色
          },
          data: item, //线数据和点数据所需要的格式一样
        };
        series.push(series1, series2);
      });
      option.series = series;

      option && chart.setOption(option);

      window.addEventListener("resize", function () {
        chart.resize();
      });
    },
  },
};
</script>

<style scoped>
.div {
  background-color: #2c3e50;
}
#main {
  margin: 0 auto;
  border: 1px solid red;
}
</style>

